.demo-dev2 {
    --t: 60px;
    --r: 60px;

    width: 400px;
    height: 200px;
    background: red;

    border-bottom: var(--t) solid blue;
    border-radius: 60px/60px 60px 120px 120px;

    mask:
        linear-gradient(#000 0 0) padding-box,
        radial-gradient(100% 100% at 0 100%, #0000 100%, #000 100%) calc(50% - var(--t)/2) 100%/var(--t) var(--t);


    /* mask-origin: padding-box, border-box; */
    mask-repeat: no-repeat;


    /* mask-position: 0px 0px, calc(50% + var(--size) / 2) 100%, calc(50% - var(--size) / 2) 100%;
    mask-size: 100% 100%, var(--size) var(--size), var(--size) var(--size); */
}

.demo-dev1 {
    --size: 40px;
    width: calc(var(--size) * 5);
    height: calc(var(--size) * 3);
    border-bottom: var(--size) solid red;
    /* padding: 40px; */
    background-color: yellowgreen;

    --t: var(--size);
    /* tooltip tail size */
    --r: var(--size);

    border-radius: var(--r)/var(--r) var(--r) calc(var(--r) + var(--t)) calc(var(--r) + var(--t));

    mask: 
        linear-gradient(#000 0 0) padding-box, 
        radial-gradient(100% 100% at 100% 100%, #0000 100%, #000 100%),
        radial-gradient(100% 100% at 0% 100%, #0000 100%, #000 100%);
    
    mask-position: 0px 0px, calc(50% + var(--size) / 2) 100%, calc(50% - var(--size) / 2) 100%;
    mask-size: 100% 100%, var(--size) var(--size), var(--size) var(--size);
    mask-repeat: no-repeat;
}

